<template>
	<view class="container">
		<u-section
			title="情景营造" 
			:line-color="appTheme.checkColor"
			font-size="36">
			<view slot="right"></view>
		</u-section>
		<view class="collapse">
			<u-collapse :accordion="false" :item-style="itemStyle">
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open">
					<view class="content">
						{{item.body}}
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>

	</view>
</template>

<script>
	import appMixin from '@/mixins/app.js'
	export default {
		mixins: [appMixin],
		data() {
			return {
				itemStyle: {
					border: '1px solid rgb(230, 230, 230)',
					marginTop: '20px',
					padding: '0 8rpx'
				},
				itemList: [{
					head: "基础活动",
					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
					open: true,
					disabled: true
				},{
					head: "进阶活动",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				},{
					head: "亲子互动",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				},{
					head: "活动结尾",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				},{
					head: "亲子共享",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: $app-page-bg-color;
	}
	.container{
		padding: 40rpx;
		
		.collapse{
			margin-top: 30rpx;
			margin-left: 30rpx;
			.content{
				padding-left: 20rpx;
				padding-right: 20rpx;
			}
		}
	}
</style>
